<!--
 * @Author: your name
 * @Date: 2022-03-06 15:33:31
 * @LastEditTime: 2023-04-06 16:55:19
 * @LastEditors: sunli
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /etrip-ui/src/pages/slider/demo.vue
-->
<template>
  <div class="wrap">
    <br>
    <span>单滑块 {{ sliderVal }}</span>
    <br>
    <br>
    <Slider v-model="sliderVal"></Slider>
    <br>
    <span>步长 {{ sliderVal_step }}</span>
    <br>
    <br>
    <Slider v-model="sliderVal_step" :step="50" :max="800" :min="200"></Slider>
    <br>
    <br>
    <span>双滑块 {{ sliderVal_range }}</span>
    <br>
    <br>
    <Slider v-model="sliderVal_range" range :max="800" :min="200"></Slider>
    <br>
    <br>
    <br>
    <span>双滑块定长 {{ sliderVal_range_step }}</span>
    <br>
    <br>
    <!-- <Slider v-model="sliderVal_range_step" range  :step="50" :max="800" :min="200"></Slider> -->
    <br>


    <Button @click="Popupvisible1 = true">异步加载</Button>
    <Popup v-model:show="Popupvisible1" :style="{ height: '30%' }">
      <div style="padding:20px">
        <br>
        <br>
        <Slider v-model="sliderVal_range_step" id="3" range  :step="50" :max="800" :min="200"></Slider>
      </div>
    </Popup>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import {Button, Slider,Popup} from '../../../packages/lib/index'

const Popupvisible1 = ref()
const sliderVal = ref()
const sliderVal_step = ref(800)
const sliderVal_range = ref([300, 650])
const sliderVal_range_step = ref([200, 700])

onMounted(() => {
  sliderVal_range.value = [200, 700]
})
</script>
<style lang='scss' scoped>
.wrap {
  width: 200px;
  margin: 100px auto;
}
</style>